<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<style>
a { text-decoration: none }
</style>
<link rel="stylesheet" href="https://unpkg.com/x-data-spreadsheet/dist/xspreadsheet.css"/>
</head>
<body>
<div id="htmlout"></div>
<br />
<script src="https://unpkg.com/x-data-spreadsheet/dist/xspreadsheet.js"></script>
<script src="https://cdn.sheetjs.com/xlsx-latest/package/dist/shim.min.js"></script>
<script src="https://cdn.sheetjs.com/xlsx-latest/package/dist/xlsx.full.min.js"></script>
<script src="https://cdn.sheetjs.com/xspreadsheet/xlsxspread.min.js"></script>
<script>

var HTMLOUT = document.getElementById('htmlout');
var xspr = x_spreadsheet(HTMLOUT,{mode:"read",showBottomBar:false,showToolbar:false});
HTMLOUT.style.height = (window.innerHeight - 400) + "px";
HTMLOUT.style.width = (window.innerWidth - 50) + "px";

var process_wb = (function() {
  var XPORT = document.getElementById('xport');
  return function process_wb(wb) {
    /* convert to x-spreadsheet form */
    var data = stox(wb);

    /* update x-spreadsheet */
    xspr.loadData(data);
    XPORT.disabled = false;

    if(typeof console !== 'undefined') console.log("output", new Date());
  };
})();

var do_file = (function() {
  return function do_file(files) {
    var f = files[0];
    var reader = new FileReader();
    reader.onload = function(e) {
      if(typeof console !== 'undefined') console.log("onload", new Date());
      var data = e.target.result;
      process_wb(XLSX.read(data));
    };
    reader.readAsArrayBuffer(f);
  };
})();
//this page refers docs.sheetjs.com/xspreadsheet/
(function() {
  try {
    const queryStr = document.location.search;
    const search = new URLSearchParams(queryStr);
    const file = search.get("file")
    fetch(file)
      .then(function(res) { return res.arrayBuffer(); })
      .then(function(ab) { process_wb(XLSX.read(ab)); });
  } catch(e) {}
})();
</script>
</html>
